import React, { useEffect, useRef, useState } from "react";
import { notification } from "antd";
import { Map, Label, Marker, NavigationControl, InfoWindow, Circle, Polyline, CustomOverlay, Polygon } from 'react-bmapgl';
import Module from './components/module';
import RiskStatue from './components/riskStatus';
import Disaster from './components/disaster';
import AffectCount from './components/affectCount';
import Event from './components/event';
import custom_map_config from '@utils/custom_map_config';

import styles from './styles/map.module.css'
import './styles/weatherIcon.less'
import { drawGuardLine } from "./config";
import InsuranceAmount from "./components/module-1/InsuranceAmount";
import Indemnity from "./components/module-4/Indemnity";
import Premium from "./components/module-2/Premium";
import InsurancePro from "./components/module-3/InsurancePro";


// 警戒线
const DrusLine = () => {

  return (
    <>
      {/* 24小时警戒线 */}
      <Label
        position={new BMapGL.Point(127, 34)}
        text="24小时警戒线"
        offset={new BMapGL.Size(0, 50)}
        style={{
          color: "red",
          textAlign: 'center',
          border: "none",
          fontSize: "12px",
          backgroundColor: "transparent",
          opacity: 0.9
        }}
      />
      <Polyline

        path={[
          new BMapGL.Point(105, 0),
          new BMapGL.Point(113, 4.5),
          new BMapGL.Point(119, 11),
          new BMapGL.Point(119, 18),
          new BMapGL.Point(127, 22),
          new BMapGL.Point(127, 34),
        ]}
        strokeColor="red"
        strokeWeight={2}
        strokeOpacity={0.3}
      />
      {/* 48小时警戒线 */}
      <Label
        position={new BMapGL.Point(132, 34)}
        text="48小时警戒线"

        offset={new BMapGL.Size(0, 50)}
        style={{
          color: "yellow",
          textAlign: 'center',
          border: "none",
          fontSize: "12px",
          backgroundColor: "transparent",
          opacity: 0.9
        }}
      />
      <Polyline
        path={[
          new BMapGL.Point(105, 0),
          new BMapGL.Point(120, 0),
          new BMapGL.Point(132, 15),
          new BMapGL.Point(132, 34),
        ]}
        strokeColor="yellow"
        strokeWeight={2}
        strokeOpacity={0.3}
      />
    </>
  )
}


// 自定义灾害图标标记点 和灾害范围
const MarkComponent = ({ setHightList = Function, disasters = [] }) => {
  const onClick = (areas = []) => {
    setHightList(areas);
  };
  return <>
    {
      disasters.length > 0 ? disasters.map((item, index) =>
        <>
          <CustomOverlay
          center={new BMapGL.Point(item.longitude, item.latitude)}
            radius={200 * 1000}
            key={index}
            offset={new BMapGL.Size(0, 0)}// 设置文本偏移量
            position={new BMapGL.Point(item.longitude, item.latitude)}>
            <div onClick={() => onClick(item.areas)} className={`weatherIcon ${item.weatherType}`}></div>
          </CustomOverlay>
          {/* 灾害范围圈 */}
          <Circle

            center={new BMapGL.Point(item.longitude, item.latitude)}
            radius={200 * 1000}
            strokeColor="#00ffff8a"
            strokeWeight={1}
            fillColor="#03a9f4c2"
            fillOpacity={0.2}
            enableMassClear={true}

          ></Circle>
        </>
      ) : null
    }

  </>
}

// 传入城市名获取城市边界
const getPoints = (areaName) => {
  let pointList = [];
  let blist = [];
  var bdary = new BMapGL.Boundary();
  bdary.get(areaName, function (res) {
    console.log("查询边界坐标：\n", areaName, res);
    var count = res.boundaries.length;
    for (var i = 0; i < count; i++) {
      pointList.push(res.boundaries[i]);
      blist.push({ points: res.boundaries[i], name: areaName });
    };
  })
  return blist;
}



// 激活的地区
const ActiveCitys = ({ activeCitys = [] }) => {



  return (
    <>
      {
        activeCitys.forEach(item => {
          const path = getPoints(item);
          console.log("path的值是：\n", path);
          return <Polygon
            path={[
              new BMapGL.Point(116.35, 39.88),
              new BMapGL.Point(116.40, 39.92),
              new BMapGL.Point(116.33, 40.01),
            ]}
            strokeColor="#f00"
            strokeWeight={2}
            fillColor="#ff0"
            fillOpacity={0.3}
            onMouseover={e => { console.log(e) }}
          />
        })
      }

    </>
  )


}



// 地图组件
const MapComponent = () => {
  const [activeCitys, setActiveCitys] = useState(['广东省']);
  const [hightList, setHightList] = useState(['广东省']);
  // 地图ref
  const mapRef = useRef();
  // 加载到的灾害列表
  const [disasters, setDisasters] = useState([
    {
      longitude: 118.87714106650792,
      latitude: 26.12146366400454,
      weatherType: 'BY',
      weatherName: '暴雨',
      areas: ['厦门市'] //预计受影响区域
    },
    // {
    //   longitude: 115.16758787164767,
    //   latitude: 23.134556618318754,
    //   weatherType: 'BY',
    //   weatherName: '暴雨',
    //   hightLightCity: ['福建省']
    // },
    // {
    //   longitude: 114.01939283514331,
    //   latitude: 22.93017904895129,
    //   weatherType: 'DF',
    //   weatherName: '大风'
    // },
    {
      longitude: 113.8015577312885,
      latitude: 22.85201621863414,
      weatherType: 'TF',
      weatherName: '台风',
    },
  ])





  // 初始化数据配置
  const initProps = {
    ref: mapRef,
    center: new BMapGL.Point(115.60920134722626, 24.717743757939967),
    mapStyleV2: {
      styleJson: custom_map_config
    },
    style: { height: '100%' },
    enableScrollWheelZoom: true,
    // minZoom: 6,
    zoom: 6
  }


  useEffect(() => { console.log("地图实例：", mapRef) }, [])
  return (
    <>
      <Map  {...initProps}>
        
        {/* 警戒线 */}
        <DrusLine />
        {/* 灾害标记点 */}
        <MarkComponent setHightList={setHightList} disasters={disasters} />
        {/* 高亮区域 */}
        {
          activeCitys.length > 0 ? <ActiveCitys activeCitys={activeCitys} /> : null
        }
      </Map >
    </>
  )


}




// 页面级组件
const MyMapPage = () => {
  // 定时更新时间
  const [newDate, setNewDate] = useState()
  useEffect(() => {
    const timmer = setInterval(() => {
      setNewDate(new Date().toLocaleString())
    }, 1000);
    return () => {
      clearInterval(timmer)
    }
  }, [])
  // 展示 的字块
  const ModuleProps = [
    {
      key: 'Premium',
      title: '保费',
      style: {
        top: '380px',
        left: '10px',
      },
      children: <Premium />
    },
    {
      key: 'InsuranceAmount',
      title: '保额',
      desc: '累计风险保险金额',
      style: {
        top: '30px',
        left: '10px',
      },
      children: <InsuranceAmount />
    },
    {
      key: 'Indemnity',
      title: '赔款',
      desc: '赔款数据汇总',
      style: {
        top: '30px',
        right: '10px',
      },
      children: <Indemnity />
    },
    {
      key: 'event',
      title: '险种占比',
      style: {
        top: '380px',
        right: '10px',
      },
      children: <InsurancePro />
    }
  ]



  return (
    <>

      <div className={`page-content ${styles.mapContent}`}>
        <div id='container'>
          <MapComponent />
        </div>
        <div className={styles.header}>
          <div className={styles.title}>灾害实时预警</div>
          <div className={styles.date}>{newDate}</div>
        </div>
        {ModuleProps.map(item => {
          return (
            <Module {...item}></Module>
          )
        })}
      </div>
    </>
  )
}
export default MyMapPage;
